<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!doctype html>
<html>
<head>
<title>Management</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-theme.css"/>
<link rel="stylesheet" href="css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="css/jquery.dataTables.css"/>
<link rel="stylesheet" href="css/main-cs.css">
</head>
<body>
	<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
	  <div class="modal-dialog modal-sm">
	    <div class="modal-content">
	    	<div class = "modal-header">
	    		<h4>Please wait...</h4>
	    	</div>
	    	<div class="modal-body">
	      		<div class="progress progress-striped active">
	   				<div class="progress-bar progress-bar-success" role="progressbar" 
	   					 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
	      				<span class="sr-only">100% Complete</span>
	  				 </div>
				</div>
			</div>
	    </div>
	  </div>
	</div>
<%@ include file="_header.jsp" %>
<form>
<div id="main">
	<ol class="breadcrumb">
  		<li><a href="#">Home</a></li>
  		<li><a href="#">Manage Employee</a></li>
  		<li class="active">Employee List</li>
	</ol>
    <!-- End breadcrumb-->
    <div id="panel1">
    	<div class="panel panel-primary">
    		<div class="panel-heading">
            	<p style="color:#FFF; font-weight:bold; font-size:20px">Employee List</p>
            </div>
        	<div class="panel-body">
        		<div id="run" class="progress progress-striped active form-group" style="display: none;">
				   	<div class="progress-bar progress-bar-success" role="progressbar"  aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">Please waiting...</div>
				</div>
            	<table style="margin: 0 auto; display: none;" class="table" id="table-main">
                	<tr>
                    	<td colspan="2">
                        	<select id="conditionSearch" class="form-control">
                            	<option>--Select Condition before--</option>
                            </select>
                        </td>
                        <td><label id="online">Online:</label><b> ${counter }</b></td>
                    </tr>
                     <tr><td colspan="3"><a id="showhide" style="cursor:pointer" data-toggle="tooltip" data-placement="bottom" title="Please! Click this to show/hide"><b>Search by some criteria</b></a></td></tr>
                    <tr>
                    	<td colspan="3">
                        	<table style="margin: 0 auto; display:none; " class="table" id="searchDetail">
                        		<tr>
                                	<td><input type="text" class="form-control" maxlength="35" id="empFirstName" placeholder="First name"></td>
                        			<td><input type="text" class="form-control" maxlength="35" id="empLastName" placeholder="Last name"></td>
                        			<td><input type="text" class="form-control" id="empEmail" placeholder="Email"></td>
                        			<td><input type="text" class="form-control" pattern="[0-9]{10}" maxlength="10" id="empPhone" placeholder="Phone"></td>
                                </tr>
                                <tr>
                        			<td><select class="form-control" id="empDepartment">
        								<option>-- Select Department--</option>
                					</select></td>
                					<td><select class="form-control" id="empOffice">
        								<option value="0">--Select Office--</option>
                					</select></td>
                					<td><button class="btn btn-info btn-block" type="button" id="search">Search</button></td>
                                    <td><button class="btn btn-info btn-block" type="button" id="saveConditionSearch" disabled="disabled">Save Condition</button></td>	
		                        </tr>	
                            </table>
                        </td>
                    </tr>
                    <tr>
                    	<td colspan="3"><button class="btn btn-info col-md-2" type="button" id="reload" style="display: none;">Reload</button>
                        <button class="btn btn-info col-md-2" type="button" id="add" style="margin-left: 5px">Add</button>
                        <button class="btn btn-info col-md-2" type="button" id="delete" style="margin-left: 5px">Delete</button></td>
                    </tr>
                    <tr>
                    	<td colspan="3">
                        	<table id="example">
                                <thead>
                                    <tr>
                                        <th>Select</th>
                                        <th>Full Name</th>
                                        <th>Department</th>
                                        <th>Office</th>
                                        <th>Phone</th>
                                        <th>Email</th>
                                    </tr>
                                </thead>
                                <tbody id="content">
                               	</tbody>
                                <tfoot>
                                	<tr>
                                        <th>Select</th>
                                        <th>Full Name</th>
                                        <th>Department</th>
                                        <th>Office</th>
                                        <th>Phone</th>
                                        <th>Email</th>
                                    </tr>
                                </tfoot>
                            </table>
                        </td>
                    </tr>
                </table>
    		</div><!-- end .panel-body-->
        </div><!-- end .panel panel-primary-->
    </div><!-- end panel1-->
    <!-- End SearchPanel-->
</div><!-- end main-->
<%@include file="_footer.jsp" %>
</form>
</body>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootbox.min.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
	var jsonEmployee;
	var table;
	var employeeCount;
	//Show-hide search by some criteria
	var hide = true;
	$("#showhide").click(function(){
		if(hide){
			$("#searchDetail").show();
			hide = false;
		}else{
			$("#searchDetail").hide();
			hide = true;
		}
	});
	
	$(document).ready(function(){
		$("#run").css("display", "");
		$.ajax({
			url:"EmployeeController.do?action=getAll",
			type:"POST",
			success:function(data){
				load(data);
				$("#run").css("display", "none");
				$("#table-main").css("display", "");
			},
			error:function(data){
				
			}
		});
	});
	
	function load(data){
		var json = data.split('~');
		jsonEmployee = json[0];
		loadEmployee(jsonEmployee);
		loadDepartment(json[1]);
		loadOffice(json[2]);
		loadConditionSearch(json[3]);
	}
	
	function loadEmployee(data){
		var employee = JSON.parse(data);
		var res="";
		employeeCount = employee.EmployeeList.length;
		$("#content").empty();
		for(i = 0; i < employeeCount; i++){
			res +="<tr>";
			res +="<td><input type='hidden' id='hidden"+i+"' value='"+employee.EmployeeList[i].EmpID+"'>"
					+"<input type='checkbox' id='check"+i+"'>&nbsp;&nbsp;"
					+"<a style='cursor: pointer;' onclick=detailEmployee('"+employee.EmployeeList[i].EmpID+"')>Detail</a>&nbsp;"
					+"<a style='cursor: pointer;' onclick=deleteEmployee('"+employee.EmployeeList[i].EmpID+"')>Delete</a></td>";
			res +="<td>"+employee.EmployeeList[i].FristName+" "+employee.EmployeeList[i].LastName+"</td>";
			res +="<td>"+employee.EmployeeList[i].Department+"</td>";
			res +="<td>"+employee.EmployeeList[i].Office+"</td>";
			res +="<td>"+employee.EmployeeList[i].Phone+"</td>";
			res +="<td>"+employee.EmployeeList[i].Email+"</td>";
			res +="</tr>";
		}
		$("#content").append(res);
		table = $('#example').dataTable();
	}
	
	function loadDepartment(data){
		var json = JSON.parse(data);
		$("#empDepartment").empty();
		$("#empDepartment").append("<option value='0'>--Select Department--</option>");
		for(i = 0; i < json.DeptList.length; i++){
			$("#empDepartment").append("<option value="+json.DeptList[i].DeptID+">"+json.DeptList[i].DeptName+"</option>");
		}
	}
	
	function loadOffice(data){
		var json = JSON.parse(data);
		$("#empOffice").empty();
		$("#empOffice").append("<option value='0'>--Select Office--</option>");
		for(i = 0; i < json.OfficeList.length; i++){
			$("#empOffice").append("<option value="+json.OfficeList[i].OfficeID+">"+json.OfficeList[i].OfficeName+"</option>");
		}
	}
	
	function loadConditionSearch(data){
		var condition = JSON.parse(data);
		$("#conditionSearch").empty();
		$("#conditionSearch").append("<option value='0'>--Select Condition Search Before--</option>");
		for(i = 0; i < condition.ConditionList.length; i++){
			$("#conditionSearch").append("<option value=\""+condition.ConditionList[i].condition+"\">"+condition.ConditionList[i].conditionName+"</option>");
		}
	}
	
	function deleteEmployee(employeeID){
		bootbox.confirm("Do you want to delete "+employeeID+"?", function(result) {
			if(result){
				$("#run").css("display", "");
				$("#table-main").css("display", "none");
				$.ajax({
					url:"EmployeeController.do?action=delete&employeeID="+employeeID,
					type:"POST",
					success:function(data){
						var result = data.split('~');
						bootbox.alert(result[0], function(){
							table.fnDestroy();
							loadEmployee(result[1]);
							$("#run").css("display", "none");
							$("#table-main").css("display", "");
						})
					},
					error:function(data){
						
					}
				});
			}
		});
	}
	
	function detailEmployee(employeeID){
		window.location.replace("DetailEmployeeController.do?action=detail&employeeID="+employeeID);
	}
	
	$("#search").click(function(){
		
		var firstname = $("#empFirstName").val().trim();
		var lastname = $("#empLastName").val().trim();
		var email = $("#empEmail").val().trim();
		var phone = $("#empPhone").val().trim();
		var office = $("#empOffice option:selected").val();
		var dept = $("#empDepartment option:selected").val();
		if(firstname != '' || lastname != '' || email != '' || phone != '' || office != '0' || dept != '0'){
			$("#saveConditionSearch").prop("disabled", false);
			$.ajax({
				url:"EmployeeController.do?action=search&before=false"
						+"&firstname="+firstname
						+"&lastname="+lastname
						+"&email="+email
						+"&phone="+phone
						+"&office="+office
						+"&dept="+dept,
				type:"POST",
				datatype:"json",
				success:function(data){
					$("#reload").css('display', '');
					table.fnDestroy();
					loadEmployee(data);
				},
				error:function(data){
					alert("123");
				}
			});
		}else{
			bootbox.alert("You no enter criteria...")
		}
	});
	
	$("#conditionSearch").change(function(){
		if($("#conditionSearch option:selected").val() != "0"){
			$.ajax({
				url:"EmployeeController.do?action=search&before=true"
						+"&condition="+$("#conditionSearch option:selected").val(),
				type:"POST",
				datatype:"json",
				success:function(data){
					$("#reload").css('display', '');
					table.fnDestroy();
					loadEmployee(data);
				},
				error:function(data){
					alert("123");
				}
			});
		}
	});
	
	$("#reload").click(function(){
		$("#empFirstName").val("");
		$("#empLastName").val("");
		$("#empEmail").val("");
		$("#empPhone").val("");
		$("#empOffice").val(0);
		$("#empDepartment").val(0);
		$("#reload").css('display', 'none');
		$("#conditionSearch").val(0);
		table.fnDestroy();
		loadEmployee(jsonEmployee);
	});
	
	$("#add").click(function(){
		window.location.replace("AddEmployeeController.do");
	});
	
	$("#delete").click(function(){
		var employeeID = "";
		for(i = 0; i < employeeCount; i++){
			if($("#check"+i).is(":checked")){
				employeeID += $("#hidden"+i).val()+"~";
			}
		}
		if(employeeID != ""){
			$("#run").css("display", "");
			$("#table-main").css("display", "none");
			$.ajax({
				url:"EmployeeController.do?action=delete&employeeID="+employeeID,
				type:"POST",
				success:function(data){
					var result = data.split('~');
					bootbox.alert(result[0], function(){
						table.fnDestroy();
						loadEmployee(result[1]);
						$("#run").css("display", "none");
						$("#table-main").css("display", "");
					})
				},
				error:function(data){
					
				}
			});
		}
	});
	
	$("#saveConditionSearch").click(function(){
		bootbox.prompt("What is condition's name?", function(result) {                
			if (result === null) {                                             
				bootbox.alert("Please! Enter condition's name before saving.");                 
			} else {
			    $.ajax({
			    	url:"EmployeeController.do?action=saveConditionSearch"
			    			+"&conditionName="+result
			    			+"&firstName="+$("#empFirstName").val()
			    			+"&lastName="+$("#empLastName").val()
			    			+"&email="+$("#empEmail").val()
			    			+"&phone="+$("#empPhone").val()
			    			+"&department="+$("#empDepartment option:selected").val()
			    			+"&office="+$("#empOffice option:selected").val(),
			    	type:"POST",
			    	success:function(data){
			    		var result = data.split('~');
			    		bootbox.alert(result[0], function() {
			    			if(result[1] != ''){
			    				loadConditionSearch(result[1]);
			    			}
			    			$("#saveConditionSearch").prop("disabled", true);
			    		});  
			    	},
			    	error:function(data){
			    		
			    	}
			    });                         
			}
		});
	});
	
	$("#signout").click(function(){
		$.ajax({
			url:"LoginController?action=false",
			type:"POST",
			success:function(){
				window.location.replace("LoginController");
			}
		});
	});
</script>
</html>
